<template>
  <div id="app">
    <div class="flex">
      <button @click="ageBTn(-1)">-</button>
      <h1 style="color:blue">年龄： {{age}}</h1>
      <button @click="ageBTn(1)">+</button>
    </div>
    <div class="flex">
      <button @click="yearBTn(-1)">-</button>
      <h1 style="color:red">出生年份： {{year}} </h1>
      <button @click="yearBTn(1)">+</button>
    </div>
  </div>
</template>
<script >
import { computed, ref, toRefs, reactive } from '_vue@3.2.20@vue'
export default {
  props:{
    title:String
  },
  setup(props,context) {
    console.log('context :>> ', context);
    const data = reactive({
        year: 1998,
        age: computed({
          get: () => {
            return 2021 - data.year
          },
          set: (val) => {
            data.year = 2021 - val
          }
        })
      })
    function yearBTn(val) {
      data.year += val
    }
    function ageBTn(val) {
      data.age += val
    }
    return { ...toRefs(data), yearBTn, ageBTn }
  }
}

</script>
<style>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
h1 {
  font-size: 20px;
  margin: 0 20px;
}
button {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 30px;
}
</style>
